今天要帮同学们点评修改一些界面，在上一期界面修改的文章里有同学说，老师你都新增了功能，能不能在不新增的基础上去改呢？当然可以了，新增或者删减其实是在客观基础上去分析这个功能对用户和产品是否有真实存在的价值，很多时候一个界面好不好，除了视觉上的判断以外也要在用户和产品角度去判断，要么信息冗余要么太简单，没有突出界面想要传达给用户的内容。

所以很多新人设计师在做UI界面的时候就会不知道应该放什么信息上去。所以要明白的是这个信息能告诉用户什么，用户能通过这个信息判断什么，用户的浏览顺序和重点在哪里？

好了，再强调一遍，当你设计完一个UI界面的时候，先问一下自己这4个问题：

1.这个界面告诉用户哪些信息

2.用户能否通过这些信息判断自己是否要继续任务流程

3.界面的浏览顺序是怎样的

4.信息展示的重点和次要点是否展示合理

接下来讲两个案例：

1.pc端迁移移动端案例

第一次从pc端迁移过来的同学会有这几个问题，同样的界面信息和内容如果要完全保留的迁移到移动端应该怎么设计，一个界面放不了那么多内容。比如我们先来看这个这个卡片列表：

这个列表的信息很有pc端的特点，这位同学其实是有意识的将重要信息强化了，但是pc端到移动端我们是可以简化很多信息和细节的，另外在用户浏览的路径上也会有不同，那我们看到这个卡片中的信息，从上往下依次浏览好像并没有问题，但就是因为没有问题，这才是问题，类似这样的信息卡片，其实如果按照这样排，那么用户就会浏览完所有信息再做决策，而我们知道的是并不是所有信息都需要让用户去关注到，例如最终要的是标题、状态和查看轨迹，而不重要的是工单和创建时间，怎么判断重不重要呢？一个是用户查看和操作的频率，另外就是业务侧的侧重点。这边为了隐藏一些敏感信息某些文案就处理了一下，大家可以看一下我们方案的前后对比。

这里没有删减任何信息，因为确实在业务方面需要某些信息，但是像“创建时间”“查看轨迹”“当前状态”这些是没有必要的文案就可以省略。而卡片的状态一般在移动端上会放在右上角显示，并且在移动端中不需要加图标做修饰。

在原来的卡片中，如果我们要根据创建时间去找的话，因为工单、创建、状态3行文字有点类似，所以会导致寻找效率不高，那么我们就讲工单还有时间分开放置，在滚动浏览的时候可以更好的寻找。

而查看轨迹按钮我还是去掉了，考虑到的既然这里是轨迹轨迹订单列表那么用户就知道进来是要查看轨迹的，所以不需要全部在卡片中给按钮，这个也是web和移动端的区别，移动端的卡片是可以整体点击的，就和电商的订单列表、提现记录等卡片列表一样的都可以点进详情，而web中的卡片则不行，所以用户在这里反正需要点击一次，那么这里就不需要给一个轨迹按钮，还显得更复杂。

再来讲个案例，相信很多同学在pc端的b端设计中遇到过这样的问题，就是很多表格类的信息在web端可以一屏放下，到移动端就放不下了，那该怎么去做。其实如果你们可以去参考阿里云的app，类似于这样pc端b端的移植到移动端来说，也只能部分移植

因为移动端的导航太有限了，像pc端左侧和顶部的筛选控件可以放多层联动，并且横向可以展开更多的标签，但是移动端横线太受限了，大家可以看一下如果我们真的要整体迁移的话就会变成以下这样的情况，但是移动端的核心的方便快捷，并不适合那么复杂的内容在一个界面去进行交互流转，所以左侧纵向tab导航不会出现下拉展开的二级联动。

所以大家几乎没有看到过最后那样的终极形态，因为实在太复杂了，但是如果讲左侧的纵向导航去掉的话其实还是可以看一下。在这个表格中横向的筛选元素很多，那么就通过滑动或者点击来获取更多标签和表格内容，另外标签可以做排序但不能做展开筛选，类似的形式可以参考下汽车之家或者汽车配置界面。

2.图文列表
这是一个比较典型的图文布局案例，需要注意的是很多小的细节，整体来看页面上半部分有效信息太少。什么是有效信息就和上文我们提到的4点是一样的，如果你的界面只是为了展示好看的图片和简单的标题来排版，那么这个界面一定是无效的。如下

然后底部的左文右图区域的信息又比较密集，和上半部分形成了一个明显的反差。另外加上一些小细节的处理不到位：卡片投影太短太深，圆角不够统一，文字行间距不合理，功能位置摆放不合理，这样整体就感觉到很多瑕疵。另外如果只是自己做练习那么图片可以选择的更美观一些，而不需要收到产品业务的限制，那么我们来重新调整一下整体的布局和优化一些细节。

在版式上最后做了两个略有区别的版本，你们觉得哪个更好呢？

/ End /


本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：应谋鬼计！